<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<title></title>
<style type="text/css">
    .popRank {
        background: darkgrey;
        height: 300px;
        border-radius:15px;
    }

    .firstPop, .secondPop, .thirdPop {
        /*background: lightblue;*/
        width: 250px;
        height: 250px;
        margin: 22px 27px;
        float:left;

    }

    .popContents {
        margin: 70px 0px;
    }

    .hr {
        border: 2px solid darkgrey;
        margin-top:20px;
    }

    .album {
        background: white;
        width: 100px;
        height: 120px;
        float: left;
    }

    .songInfo {
/*        background:lightcyan;*/
        height:120px;
        margin-left:85px;
    }
    .songInfo li{
        padding-top:5px;

    }
    .songInfo li:first-child{
        padding-top:20px;
    }
    .like{
 /*       background:#ffffff;*/
    }
    .like label{
        width: 120px;
        text-align: right;
        font-weight: bold;
        font-size:130%;
        display: inline-block;
        padding:  10px 10px 0 0;
    }
    .like img{
        width:30px;
        height:30px;
        margin-bottom:3px;
    }
    table{
        margin-top:20px;
        width:100%;
        border-top: 3px solid dimgray;
        border-bottom: 3px solid dimgray;
        text-align:center;
    }
    th,td{
        border-collapse: collapse;
    }

    tr{
        height:50px;
        border:1px solid dimgray;
        border-left:none;
        border-right:none;
    }

    .li, .s, .memo {
        width:30px;
        height:30px;
    }

</style>

<!-- contents -->
<div id="contents" class="row">
    <div class="popSong">
        <div class="contentsHeader">
            <span class="log">인기곡</span>
            <span class="wel">&nbsp;&nbsp;&nbsp;SING인기곡 차트입니다.</span>
        </div>

        <div class="popContents">
            <div class="popRank ">
                <ul class="">
                    <li>
                        <div class="firstPop">
                            <h3>1위</h3>
                            <div class="album"></div>
                            <div class="songInfo">
                                <ul>
                                    <li><span style="font-weight: bold; font-size: 130%;">광화문에서(제목)</span></li>
                                    <li><span>규현(가수)</span></li>
                                    <li><span>2014.11.16(발매일)</span></li>
                                </ul>
                            </div>
                            <div class="like">
                                <label><img src="/images/like.png"/>좋아요</label><span>5,2345</span></div>
                        </div>
                    </li>
                    <li>
                        <div class="secondPop">
                            <h3>2위</h3>
                            <div class="album"></div>
                            <div class="songInfo">
                                <ul>
                                    <li><span style="font-weight: bold; font-size: 130%;">광화문에서(제목)</span></li>
                                    <li><span>규현(가수)</span></li>
                                    <li><span>2014.11.16(발매일)</span></li>
                                </ul>
                            </div>
                            <div class="like">
                                <label><img src="/images/like.png"/>좋아요</label><span>5,2345</span></div>
                        </div>
                    </li>
                    <li>
                        <div class="thirdPop">
                            <h3>3위</h3>
                            <div class="album"></div>
                            <div class="songInfo">
                                <ul>
                                    <li><span style="font-weight: bold; font-size: 130%;">광화문에서(제목)</span></li>
                                    <li><span>규현(가수)</span></li>
                                    <li><span>2014.11.16(발매일)</span></li>
                                </ul>
                            </div>
                            <div class="like">
                                <label><img src="/images/like.png"/>좋아요</label><span>5,2345</span></div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="h">
                <div class="hr"></div>
            </div>

            <div class="popList">
                <form method="post" id="popfrm" name="popfrm">
                        <table >
                            <colgroup>
                                <col style="width: 10%" />
                                <col style="width: 10%" />
                                <col style="width: 30%" />
                                <col style="width: 20%" />
                                <col style="width: 10%" />
                                <col style="width: 10%" />
                                <col style="width: 10%" />
                            </colgroup>
                            <thead  style="border:3px solid dimgray; border-left:none; border-right:none;">
                            <tr>
                                <!-- 제목 행 출력 -->
                                <th>순위</th>
                                <th>곡번호</th>
                                <th>곡제목</th>
                                <th>아티스트</th>
                                <th>좋아요</th>
                                <th>부르기</th>
                                <th>가사</th>
                            </tr>
                            </thead>
                            <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>2304</td>
                                        <td>광화문에서</td>
                                        <td>규현</td>
                                        <td><img src="/images/like.png" class="li"/>5024</td>
                                        <td><img src="/images/pops.png" class="s"/></td>
                                        <td><img src="/images/memo.png" class="memo"/></td>
                                    </tr>
                                    <tr>
                                        <td>1</td>
                                        <td>2304</td>
                                        <td>광화문에서</td>
                                        <td>규현</td>
                                        <td><img src="/images/like.png" class="li"/>5024</td>
                                        <td><img src="/images/pops.png" class="s"/></td>
                                        <td><img src="/images/memo.png" class="memo"/></td>
                                    </tr>
                                    <tr>
                                        <td>1</td>
                                        <td>2304</td>
                                        <td>광화문에서</td>
                                        <td>규현</td>
                                        <td><img src="/images/like.png" class="li"/>5024</td>
                                        <td><img src="/images/pops.png" class="s"/></td>
                                        <td><img src="/images/memo.png" class="memo"/></td>
                                    </tr>
                                    <tr>
                                        <td>1</td>
                                        <td>2304</td>
                                        <td>광화문에서</td>
                                        <td>규현</td>
                                        <td><img src="/images/like.png" class="li"/>5024</td>
                                        <td><img src="/images/pops.png" class="s"/></td>
                                        <td><img src="/images/memo.png" class="memo"/></td>
                                    </tr>
                                    <tr>
                                        <td>1</td>
                                        <td>2304</td>
                                        <td>광화문에서</td>
                                        <td>규현</td>
                                        <td><img src="/images/like.png" class="li"/>5024</td>
                                        <td><img src="/images/pops.png" class="s"/></td>
                                        <td><img src="/images/memo.png" class="memo"/></td>
                                    </tr>
                                    <tr>
                                        <td>1</td>
                                        <td>2304</td>
                                        <td>광화문에서</td>
                                        <td>규현</td>
                                        <td><img src="/images/like.png" class="li"/>5024</td>
                                        <td><img src="/images/pops.png" class="s"/></td>
                                        <td><img src="/images/memo.png" class="memo"/></td>
                                    </tr>
                                    <tr>
                                        <td>1</td>
                                        <td>2304</td>
                                        <td>광화문에서</td>
                                        <td>규현</td>
                                        <td><img src="/images/like.png" class="li"/>5024</td>
                                        <td><img src="/images/pops.png" class="s"/></td>
                                        <td><img src="/images/memo.png" class="memo"/></td>
                                    </tr>
                                    <tr>
                                        <td>1</td>
                                        <td>2304</td>
                                        <td>광화문에서</td>
                                        <td>규현</td>
                                        <td><img src="/images/like.png" class="li"/>5024</td>
                                        <td><img src="/images/pops.png" class="s"/></td>
                                        <td><img src="/images/memo.png" class="memo"/></td>
                                    </tr>
                                    <tr>
                                        <td>1</td>
                                        <td>2304</td>
                                        <td>광화문에서</td>
                                        <td>규현</td>
                                        <td><img src="/images/like.png" class="li"/>5024</td>
                                        <td><img src="/images/pops.png" class="s"/></td>
                                        <td><img src="/images/memo.png" class="memo"/></td>
                                    </tr>

                            </tbody>
                        </table>
                    </form>
            </div>
        </div>
    </div>
</div>
